<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
			<view class="tit f36 cfff">规格选择</view>
			<view class="btn" @tap="$open('./goAdd')"><image src="../../static/images/tb_more.png" mode="aspectFit"></image></view>
		</view>
		<view class="tipBox"><view class="text f28 c666">温馨提示：为了确保数据准确，货品信息保存后，则不可修改已有规格，只能新增规格属性。</view></view>

		<!-- 规格选择 -->
		<view class="select-box">
			<view class="select-item" v-for="(item, index) in list" :key="index">
				<view class="title">
					<view class="virtue f32">
						<view class="name c333">{{ item.name }}</view>
						<view class="select" @tap="shuxingku(index)">
							从属性库中选择
							<image src="../../static/images/icon_right.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="delete" @tap="deleteBtn(index)"><image src="../../static/images/icon_delete.png" mode="aspectFit"></image></view>
				</view>

				<view class="addBox">
					<view class="addVirtue f30" @click="open(index)">添加属性</view>
					<view class="add-item f30 c333" v-for="(val, i) in item.values" :key="i" @tap="ok(index,i)">
						{{ val}}
						<image src="../../static/images/icon_close.png" mode="aspectFit" @tap.stop="deletion(index,i)"></image>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 130upx;"></view>
		<view class="fiexd-add" @tap="complete"><view class="text f32 cfff">完成</view></view>
		<!-- 添加分类弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入属性名称</view>
					<view class="input-box"><input type="text" placeholder="最多输入10个字符" v-model="name" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="define">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			list: [],
			name: '', //分类名称
			property: '', //属性
			index: 0, //给第几个加
			erindex:0,
			virtueName:[]
		};
	},
	onShow() {
		this.list=uni.getStorageSync('specList')
		if(uni.getStorageSync('list02')!=''){
				this.list[this.index].values=this.list[this.index].values.concat(uni.getStorageSync('list02'))
		}
		uni.removeStorageSync('list02')
		uni.setStorageSync('specList',this.list)
	},
	onLoad() {
		// this.getCategoryList();
	
	},
	methods: {
		// 点击完成返回上一页
		ok(index,erindex){
			// uni.setStorageSync('spec',this.list[index].name+ ':' +this.list[index].values[erindex].name)
			uni.setStorageSync('specName',this.list[index].name)			uni.setStorageSync('virtueName',this.list[index].values[erindex].name)
			this.$back()
		},
		// 添加
		shuxingku(index){
			this.index=index
			this.$open('./propertylist')
		},
		complete(){
			// uni.navigateBack({
			// 	delta:1
			// })
			var coding = uni.getStorageSync('goods_no')
			var name = uni.getStorageSync('name')
			uni.navigateTo({
				url:'productInfo?coding='+coding+'&name='+name
			})
		},
		// 查询规格列表
		// getCategoryList() {
		// 	let that = this;
		// 	that.$ajax('api/v1.goods/categoryList', {}, 'GET')
		// 		.then(res => {
		// 			if (res.code == 1) {
		// 				res.result.map(res => {
		// 					res.values = [];
		// 				});
		// 				that.list = res.result;
		// 			}
		// 		})
		// 		.catch(res => {
		// 			that.$sToast(res.message);
		// 		});
		// },
		//分类删除
		deleteBtn(index){
			this.list.splice(index, 1);
		},
		
		
		// deleteBtn(id) {
		// 	let that = this;
		// 	that.$ajax('api/v1.goods/categoryDel', {
		// 		category_id: id
		// 	})
		// 		.then(res => {
		// 			if (res.code == 1) {
		// 				that.$sToast('分类删除');
		// 				setTimeout(function() {
		// 					that.getCategoryList();
		// 				}, 1500);
		// 			}
		// 		})
		// 		.catch(res => {
		// 			that.$sToast(res.message);
		// 		});
		// },
		open(index) {
			this.index = index;
			this.$refs.popup.open();
			this.name = ''
		},
		define() {
			let that = this;
			if (this.name == '') {
				this.$sToast('属性名称不能为空');
			} else {
				that.list[that.index].values.push(that.name);
				that.close();
				this.virtueName.push(that.name)
				uni.setStorageSync('specList',this.list)
			}
		},
		close() {
			this.$refs.popup.close();
		},
		deletion(index,erindex) {
			this.list[index].values.splice(erindex,1)
			uni.setStorageSync('specList',this.list)
		}
	}
};
</script>

<style lang="scss">
.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #249af6;
	padding: 40upx 30upx 15upx 30upx;

	.arrow {
		image {
			width: 20upx;
			height: 40upx;
		}
	}

	.btn {
		image {
			width: 44upx;
			height: 44px;
		}
	}
}

.tipBox {
	background-color: #f7f4f8;
	padding: 25upx 30upx;
}

.select-box {
	padding: 30upx 30upx 0 30upx;

	.select-item {
		margin-bottom: 10upx;

		.title {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 55upx;

			.virtue {
				display: flex;
				flex-direction: row;
				align-items: center;

				.select {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #249af6;
					margin-left: 40upx;

					image {
						width: 20upx;
						height: 30upx;
						margin: 4upx 0 0 20upx;
						vertical-align: middle;
					}
				}
			}

			.delete {
				image {
					width: 45upx;
					height: 45upx;
				}
			}
		}
	}
}

.addBox {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;

	.addVirtue {
		border: 2upx #249af6 solid;
		padding: 10upx 15upx;
		color: #249af6;
		margin: 0 60upx 45upx 0;
	}

	.add-item {
		border: 2upx #666 solid;
		padding: 10upx 15upx;
		margin: 0 60upx 45upx 0;
		position: relative;

		image {
			width: 35upx;
			height: 35upx;
			position: absolute;
			top: -18upx;
			right: -10upx;
		}
	}
}

.fiexd-add {
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 100upx;
	line-height: 100upx;
	background-color: #249af6;

	.text {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		image {
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}
}
</style>
